
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

interface PageTransitionProps {
  children: React.ReactNode;
}

const PageTransition: React.FC<PageTransitionProps> = ({ children }) => {
  const location = useLocation();
  const [displayChildren, setDisplayChildren] = useState(children);
  const [transitionStage, setTransitionStage] = useState('page-transition-enter');
  
  useEffect(() => {
    if (location.pathname !== '/') {
      setTransitionStage('page-transition-exit-active');
      
      const timeout = setTimeout(() => {
        setDisplayChildren(children);
        setTransitionStage('page-transition-enter');
        
        const enterTimeout = setTimeout(() => {
          setTransitionStage('page-transition-enter-active');
        }, 50);
        
        return () => clearTimeout(enterTimeout);
      }, 300);
      
      return () => clearTimeout(timeout);
    } else {
      setDisplayChildren(children);
      setTransitionStage('page-transition-enter');
      
      const timeout = setTimeout(() => {
        setTransitionStage('page-transition-enter-active');
      }, 50);
      
      return () => clearTimeout(timeout);
    }
  }, [location, children]);
  
  return (
    <div className={`${transitionStage} min-h-screen`}>
      {displayChildren}
    </div>
  );
};

export default PageTransition;
